<template>
  <div style="height: 6vh;background-color:#fff;padding: 10px 20px;">
    <span style="line-height:60px;font-size:20px;">订单管理</span>
<!--    <el-button type="primary" style="float: right;margin-top: 10px;">批量导出</el-button>-->
  </div>

<!--  订单详情弹窗-->
  <el-dialog
      :title="dialogTitle"
      style="width: 1300px;padding: 50px;"
      v-model="dialogVisible"
      :before-close="handleClose">
    <el-form label-position="left" label-width="120px" style="border: none;">
      <hr>
      <el-row><el-col><span style="font-weight: bold">基本信息</span></el-col></el-row>
        <el-row :gutter="20" style="margin-top: 15px;">
          <el-col :span="8">
            <el-form-item label="订单号 :" ><span>{{orderDetail.orderNumber}}</span></el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="下单时间 :"><span>{{orderDetail.orderTime}}</span></el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="订单状态 :"><span>{{orderDetail.orderStatus}}</span></el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="商家名称 :"><span>{{orderDetail.merchantName}}</span></el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="客户姓名 :"><span>{{orderDetail.username}}</span></el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="客户电话 :"><span>{{orderDetail.userPhone}}</span></el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="用户备注 :"><span>{{orderDetail.customerRemark}}</span></el-form-item>
          </el-col>
        </el-row>

      <hr>

      <el-row><el-col><span style="font-weight: bold">支付信息</span></el-col></el-row>
        <el-row :gutter="20" style="margin-top: 15px;">
        <el-col :span="8">
          <el-form-item label="支付平台交易号 :"><span>{{orderDetail.paymentTransactionId}}</span></el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="支付时间 :"><span>{{orderDetail.paymentTime}}</span></el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="支付状态 :"><span>{{orderDetail.paymentStatus}}</span></el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="支付方式 :"><span>{{orderDetail.paymentMethod}}</span></el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="订单金额 :"><span>{{orderDetail.totalAmount}}</span></el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="实付金额 :"><span>{{orderDetail.paidAmount}}</span></el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="商单运费 :"><span>{{orderDetail.shippingFee}}</span></el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="优惠金额 :"><span>{{orderDetail.discountAmount}}</span></el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="优惠券代码 :"><span>{{orderDetail.couponCode}}</span></el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="优惠券抵扣金额 :"><span>{{orderDetail.couponDiscount}}</span></el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="促销码 :"><span>{{orderDetail.promoCode}}</span></el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="促销折扣金额 :"><span>{{orderDetail.promoDiscount}}</span></el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="积分折扣金额 :"><span>{{orderDetail.pointsDiscount}}</span></el-form-item>
        </el-col>
      </el-row>

      <hr>

      <el-row><el-col><span style="font-weight: bold">商品信息</span></el-col></el-row>
      <el-row :gutter="20" style="margin-top: 15px;">
        <el-col :span="8">
          <el-form-item label="商品名称 :"><span>{{orderDetail.productName}}</span></el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="商品价格 :"><span>{{orderDetail.productPrice}}</span></el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="商品数量 :" ><span>{{orderDetail.productCount}}</span></el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="商家备注 :"><span>{{orderDetail.merchantRemark}}</span></el-form-item>
        </el-col>
      </el-row>

      <hr>

      <el-row><el-col><span style="font-weight: bold">物流信息</span></el-col></el-row>
        <el-row :gutter="20" style="margin-top: 15px;">
          <el-col :span="8">
            <el-form-item label="收货人姓名 :"><span>{{orderDetail.recipientName}}</span></el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="收货人电话 :"><span>{{orderDetail.recipientPhone}}</span></el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="收货人地址 :"><span>{{orderDetail.shippingAddress}}</span></el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="物流公司 :"><span>{{orderDetail.logisticsCompany}}</span></el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="配送方式 :"><span>{{orderDetail.shippingMethod}}</span></el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="物流跟踪号 :"><span>{{orderDetail.trackingNumber}}</span></el-form-item>
          </el-col>
        </el-row>

    </el-form>
    <template #footer>
      <el-button @click="handleClose">关闭</el-button>
    </template>
  </el-dialog>

<!--   用户搜索卡片-->
  <el-card style="margin: 20px; height: 70px;">
    <el-form inline="inline">
      <el-form-item label="订单状态" style="width: 260px;">
        <el-select v-model="searchOrderForm.orderStatus">
          <el-option v-for="item in orderStatusOptions" :label="item.label"/>
        </el-select>
      </el-form-item>
      <el-form-item label="配送方式" style="width: 260px;">
        <el-select v-model="searchOrderForm.shippingMethod">
          <el-option v-for="item in shippingMethodOptions" :label="item.label"/>
        </el-select>
      </el-form-item>
      <el-form-item label="日期搜索" style="width: 200px; margin-right: 2px">
        <el-select v-model="searchOrderForm">
          <el-option v-for="item in dateOptions" :label="item.label" :value="item.value"/>
        </el-select>
      </el-form-item>
      <el-form-item style="width: 300px;" >
        <el-date-picker v-model="searchOrderForm"
            type="daterange"
            format="YYYY-MM-DD HH:mm:ss"
            value-format="YYYY-MM-DD HH:mm:ss"
            start-placeholder="开始时间"
            end-placeholder="结束结束"
            range-separator="--"/>
      </el-form-item>
      <el-form-item label="关键字搜索" style="width: 200px; margin-right: 2px">
        <el-select v-model="searchOrderForm">
          <el-option v-for="item in keyOptions" :label="item.label"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="" style="width: 300px;">
        <el-input placeholder="请输入" v-model="searchOrderForm"/>
      </el-form-item>
      <el-form-item>
        <el-button @click="resetSearch">重置</el-button>
        <el-button type="primary" @click="loadOrder">查询</el-button>
      </el-form-item>
    </el-form>
  </el-card>

<!--   用户表格卡片-->
  <el-card style="margin: 20px;">
    <el-table :data="orderArr">
<!--      <el-table-column type="index" label="编号" width="80" align="center"></el-table-column>-->
      <el-table-column prop="orderNumber" label="订单编号" width="120" align="center"></el-table-column>
      <el-table-column prop="username" label="客户姓名" width="120" align="center"></el-table-column>
      <el-table-column prop="userPhone" label="客户电话" width="120" align="center"></el-table-column>
      <el-table-column prop="orderTime" label="下单时间" width="180" align="center"></el-table-column>
      <el-table-column prop="productName" label="商品名称" width="120" align="center"></el-table-column>
      <el-table-column prop="productCount" label="商品数量" width="100" align="center"></el-table-column>
      <el-table-column prop="totalAmount" label="订单金额" width="120" align="center"></el-table-column>
      <el-table-column prop="shippingFee" label="商单运费" width="120" align="center"></el-table-column>
      <el-table-column prop="orderStatus" label="订单状态" width="120" align="center"></el-table-column>
      <el-table-column prop="paymentTime" label="支付时间" width="180" align="center"></el-table-column>
      <el-table-column prop="paymentMethod" label="支付方式" width="120" align="center"></el-table-column>
      <el-table-column prop="shippingAddress" label="收货地址" width="220" align="center"></el-table-column>
      <el-table-column label="操作" align="center">
        <template #default="scope">
          <el-button link type="primary" @click="showOrderDetail(scope.row.id)">订单详情</el-button>
<!--          <el-button link type="primary" @click="deleteOrder(scope.row.id)">导出订单</el-button>-->
        </template>
      </el-table-column>
    </el-table>
  </el-card>
</template>

<script setup>
import {onMounted, ref} from "vue";
import {ElMessage} from "element-plus";
import axios from "axios";
import qs from "qs";
import index from "vuex";

onMounted(()=>{
  loadOrder();
})

const dialogVisible = ref(false);
//定义变量用来控制弹窗的标题
const dialogTitle = ref('订单详情');

const handleClose = ()=>{
  dialogVisible.value = false;
}

const searchOrderForm = ref({orderNumber:'',username:'',userPhone:'',merchantName:'',productName:'',
  orderTime:'',orderStatus:'', paymentStatus:'',paymentMethod:'',paymentTime:'',paymentTransactionId:'',shippingTime:'',
  deliveryTime:'',recipientName:'',recipientPhone:'',shippingAddress:'',shippingMethod:'',logisticsCompany:'',
  trackingNumber:'',refundStatus:'',refundTime:''});

const resetSearch = ()=>{
  searchOrderForm.value = {};
  loadOrder();
}

const orderArr = ref([]);

const loadOrder = ()=>{
  let data = qs.stringify(searchOrderForm.value);
  axios.get(BASE_URL+'/v1/order/select?'+data)
      .then((response)=>{
        if(response.data.code == 2000){
          orderArr.value = response.data.data;
        }else{
          ElMessage.error(response.data.msg);
        }
      })
}

const orderDetail = ref({
  orderNumber:'',username:'',userPhone:'',merchantName:'',productName:'',productPrice:'',productCount:'',orderTime:'',
  orderStatus:'',paymentMethod:'',paymentTime:'',paymentTransactionId:'',totalAmount:'',paidAmount:'', shippingFee:'',
  discountAmount:'',couponCode:'',couponDiscount:'',promoCode:'',promoDiscount:'', pointsDiscount:'',shippingTime:'',
  deliveryTime:'',recipientName:'',recipientPhone:'',shippingAddress:'',shippingMethod:'',logisticsCompany:'',
  trackingNumber:'',refundStatus:'',refundAmount:'',refundTime:'',customerRemark:'',merchantRemark:'',updateTime:''
});

const showOrderDetail = (id)=>{
  dialogVisible.value = true;
  axios.get(BASE_URL+'/v1/order/select?id='+id).then((response)=>{
    if(response.data.code == 2000){
      orderDetail.value = response.data.data[0];
    }else{
      ElMessage.error(response.data.msg);
    }
  })
}

// const deleteOrder = (id)=>{
//   if(confirm('您确认删除该订单吗?')){
//     axios.post(BASE_URL+'/v1/order/delete/'+id)
//         .then((response)=>{
//           if(response.data.code == 2000){
//             ElMessage.success('删除成功!');
//             loadOrder();
//           }else{
//             ElMessage.error(response.data.msg);
//           }
//         })
//   }
// }

const orderStatusOptions = ref([
  {label:'已下单',value:'10'},
  {label:'待付款',value:'20'},
  {label:'已付款',value:'30'},
  {label:'代发货',value:'40'},
  {label:'已发货',value:'50'},
  {label:'已收获',value:'60'},
  {label:'已退货',value:'70'},
  {label:'待退款',value:'80'},
  {label:'已退款',value:'90'},
  {label:'已取消',value:'100'}
]);

const dateOptions = ref([
  {label:'下单时间',value:'10'},
  {label:'支付时间',value:'20'},
  {label:'发货时间',value:'30'},
  {label:'收获时间',value:'40'}
]);

const shippingMethodOptions=ref([
  {label:'快递发货',value:'10'},
  {label:'同城配送',value:'20'},
  {label:'上门自提',value:'30'}
]);

const keyOptions = ref([
  {label:'订单编号',value:'10'},
  {label:'商品编码',value:'20'},
  {label:'商品名称',value:'30'},
  {label:'商家名称',value:'40'},
  {label:'用户名称',value:'50'},
  {label:'收货人姓名',value:'60'},
  {label:'收货人手机号码',value:'70'},
  {label:'收货人地址',value:'80'},
  {label:'物流公司',value:'90'},
  {label:'物流跟踪号',value:'100'}
]);

// const titleFormatter=(row,column,cellValue,index)=>{
//   for (let item of levelOptions.value) {
//     if (item.value==cellValue) {
//       cellValue = item.label;
//     }
//   }
//   return cellValue;
// }

</script>


<style scoped>

</style>